<style>
  .rp-container {
    padding-left:10px;
    padding-right:10px;
  }
  .rp-background-lightgray {
    background-color:rgb(240, 240, 240);
  }
  .rp-record {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgb(240, 240, 240) ;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .rp-record .avatar {
    width: 50px;
    border-radius: 3px;
  }
  .rp-record .info {
    display: inline-block;
    width: 100%;
  }
  .rp-record .desc {
    display:inline-block;
    margin-left: 1em;
  }
  .rp-record .datetime {
    color: rgb(200, 200, 200);
  }
  .rp-record .amount {
    float: right;
  }
</style>
<div class="fui-page fui-page-current  fui-page-current rp-background-lightgray">
  <div class="" style="height:380px;background-color:white">
    <div style="color:#ffcc00;box-shadow:0 1px 2px gray;padding: 0 3px;text-align:center;margin-bottom:2em;height:300px;background-color:#e52600;border-bottom-right-radius:50% 70px;border-bottom-left-radius:50% 70px;">
      <div style="text-align: center;padding-top:70px;">
        <div style="">
          <img src="{{pagedata.red_sender_avatar}}" style="display:inline-block;border-radius:5;width:25px;height:24px;margin:0;padding:0">
          <span style="padding-left:5px;vertical-align:middle;font-weight:bold;line-height:24px;font-size:20px;">{{pagedata.red_sender_name}}的红包</span>
        </div>

        <div style="margin: 10px;"><small>{{pagedata.red_title}}</small></div>

        <div style="margin-top:40px;">
          <span style="font-size: 2em;
                       vertical-align: top;
                       padding-right: 0.5em;
                       font-weight: bold;">¥</span>
          <span style="line-height:1em;font-size:4em;">{{pagedata.red_this_amount ||'0.00'}}</span></div>
        <div><small>红包已存入余额 &gt;</small></div>
      </div>
    </div>

    <div style="text-align: center">
      <span class="r-icon" ng-show="pagedata.red_given_count < pagedata.red_total_count" onclick="$('#showsharecover').modal();" style="color:red">
        <span style="font-size:1.2em;">马上邀请好友领红包</span>
        <i class="icon icon-skip" style="padding:0.2rem;color:red;font-size:0.8rem"></i>
      </span>
    </div>
</div>
<div style="background-color:white;">
   <div style="border-bottom:1px solid #f0f0f0;">
		<div class="rp-container" style="margin-top:10px;">
			<div style="padding-top:0.5em;padding-bottom:0.5em;">
			已领取{{pagedata.red_given_count}}/{{pagedata.red_total_count}}个红包，共{{pagedata.red_given_amount}}/{{pagedata.red_total_amount}}元
			</div>
		</div>
    </div>
  <div class="rp-container"  style="background-color:white"> 
    <div ng-repeat="x in pagedata.red_given" class="rp-record">
      <img src="{{x.avatar}}" class="avatar">
      <span class="info" style="vertical-align: center">
        <span class="desc">
          <span class="nickname">{{x.nickname}}</span><br/>
          <span class="datetime">{{x.createtime | date:'HH:mm:ss'}}</span>
        </span>
        <span class="amount">{{x.fee}}元</span>
      </span>
    </div>
  </div>  
</div>
<!--分享弹层-->
<div id="showsharecover" class="modal fade" tabindex="-1" style="z-index:99999;display:none;">
    <div class="modal-dialog" style="width:100%;left:0;top:0">
      <div id="cover">
        <div class='fui-mask-m visible'></div>
        <div class='arrow'></div>
        <div class='content'>请点击右上角<br/>通过【发送给朋友】<br/>转发给好友哦</div>
      </div>
    </div>
</div>
